<script setup lang='ts'>
import { ref, reactive, toRefs, toRaw, onMounted } from "vue";
import { Edit, Delete, Search } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { adverHook } from "../../hooks/adverHooks";
import { queryObject } from "../../service/advertising";
import { ElMessage, ElMessageBox } from "element-plus";

const router = useRouter();
const _adverHook = adverHook();

const tableData = ref<Array<any>>([]);

const formInline = reactive<queryObject>({
  advertisingName: null,
  position: null,
});

const currentPage = ref<number>(1);
const limit = ref<number>(5);
const total = ref<number>(0);

function getSearchObj() {
  let formdata = toRaw(formInline) as queryObject;
  formdata.page = currentPage.value;
  formdata.limit = limit.value;
  return formdata;
}

onMounted(() => {
  // _adverHook.getList(getData);
  _adverHook.queryAdver(getSearchObj(), getData);
});

function getData(data: any, count: number) {
  tableData.value = data;
  total.value = count;
}

const search = () => {
  currentPage.value = 1;
  _adverHook.queryAdver(getSearchObj(), getData);
};

const pageChange = (val: any): void => {
  console.log("页码：", val);
  currentPage.value = val;
  _adverHook.queryAdver(getSearchObj(), getData);
};

// 编辑页跳转
const toUpdate = (e: any, type: number) => {
  let data = {};
  if (type == 1) {
    let id = e.currentTarget.dataset.id;
    data = { id, type };
  } else {
    data = { type };
  }
  router.push({ name: "adverUpdate", query: data });
};

const openConfirm = (e: any) => {
  let id = e.currentTarget.dataset.id;
  ElMessageBox.confirm("此操作将会永久删除数据，是否继续?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      // console.log("确定");
      toDelete(id);
    })
    .catch((err: any) => {
      console.log(err);
      ElMessage({
        type: "info",
        message: "已取消删除",
      });
    });
};

const toDelete = (id: any) => {
  currentPage.value = 1;
  _adverHook.deleteById(id, getSearchObj(), getData);
};
</script>
<!-- 模型 -->
<template>
  <div class="">
    <!-- 顶部搜索部分 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="formInline.advertisingName" placeholder="广告名称" />
      </el-form-item>
      <el-form-item>
        <el-select v-model="formInline.position">
          <el-option label="全部" :value="null" />
          <el-option label="pc端轮播广告" :value="'0'" />
          <el-option label="App端轮播广告" :value="'1'" />
          <el-option label="分类广告" :value="'2'" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :icon="Search" @click="search()"
          >查询</el-button
        >
        <el-button type="primary" plain @click="toUpdate($event, 0)"
          >添加广告</el-button
        >
      </el-form-item>

      <!-- 表格 -->
    </el-form>
    <el-table :data="tableData" center border style="width: 100%">
      <el-table-column type="selection" width="50" />
      <el-table-column prop="id" label="编号" width="80">
        <template #default="{ row }">
          <span class="hiddenText">{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="advertisingName" label="广告名称" width="180" />
      <el-table-column prop="position" label="广告位置">
        <template #default="s">
          <span v-if="s.row.position == '0'">pc端轮播广告</span>
          <span v-else-if="s.row.position == '1'">App端轮播广告</span>
          <span v-else>分类广告</span>
        </template>
      </el-table-column>
      <el-table-column label="广告图片">
        <template #default="s">
          <el-image
            :src="s.row.image"
            style="width: 60px; height: 60px"
            :fit="'fit'"
          />
        </template>
      </el-table-column>
      <el-table-column label="时间" width="240">
        <template #default="s">
          <p>开始时间：{{ s.row.createTime }}</p>
          <p>结束时间：{{ s.row.dueTime }}</p>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="上线/下线">
        <template #default="s">
          <span
            v-if="s.row.status == 0"
            class="status success"
            :data-id="s.row.id"
            >上线</span
          >
          <span
            v-else
            class="status danger"
            :data-id="s.row.id"
            >下线</span
          >
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="s">
          <el-button
            type="primary"
            :data-id="s.row.id"
            :icon="Edit"
            @click="toUpdate($event, 1)"
          />
          <el-button
            type="danger"
            :data-id="s.row.id"
            :icon="Delete"
            @click="openConfirm($event)"
          />
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="limit"
      :current-page="currentPage"
      :total="total"
      @current-change="pageChange"
    />
  </div>
</template>

<style scoped>
::v-deep th div,
::v-deep td div {
  text-align: center;
}

::v-deep .el-pagination {
  margin-top: 8px;
  justify-content: flex-end;
}
</style>